<template>
  <div class="container">
    <global-header :user="user" />
    <spinner v-if="isLoading" />
    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { computed, watch } from "vue";
import { useStore } from "vuex";
import GlobalHeader from "@/components/Header.vue";
import Spinner from "@/components/Spinner.vue";
import { GlobalDataProps } from "@/types";
import message from "@/components/message/index";
import "bootstrap/dist/css/bootstrap.min.css";

const store = useStore<GlobalDataProps>();
const user = computed(() => store.state.user);
const isLoading = computed(() => store.state.loading);
const error = computed(() => store.state.error);

watch(
  () => error.value.status,
  () => {
    const { status, message: msg } = error.value;
    if (status && msg) {
      message(msg, "error");
    }
  }
);
</script>
